<template>
	<view class="attendance-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">考勤管理</text>
			</view>
			<view class="header-right">
				<uni-icons type="plus" size="18" color="#fff" @tap="showCreateModal"></uni-icons>
			</view>
		</view>

		<!-- 考勤统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card">
				<text class="stat-number">{{ attendanceStats.totalStudents }}</text>
				<text class="stat-label">总人数</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ attendanceStats.presentCount }}</text>
				<text class="stat-label">出勤</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ attendanceStats.absentCount }}</text>
				<text class="stat-label">缺勤</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ attendanceStats.attendanceRate }}%</text>
				<text class="stat-label">出勤率</text>
			</view>
		</view>

		<!-- 考勤记录列表 -->
		<view class="attendance-list">
			<view class="list-header">
				<text class="list-title">考勤记录</text>
				<view class="filter-tabs">
					<text 
						class="filter-tab" 
						:class="{ active: currentFilter === 'all' }"
						@tap="setFilter('all')"
					>全部</text>
					<text 
						class="filter-tab" 
						:class="{ active: currentFilter === 'today' }"
						@tap="setFilter('today')"
					>今日</text>
					<text 
						class="filter-tab" 
						:class="{ active: currentFilter === 'week' }"
						@tap="setFilter('week')"
					>本周</text>
				</view>
			</view>

			<scroll-view class="records-list" scroll-y="true">
				<view 
					v-for="(record, index) in filteredRecords" 
					:key="index" 
					class="record-item"
					@tap="showRecordDetail(record)"
				>
					<view class="record-header">
						<view class="record-info">
							<text class="record-date">{{ record.date }}</text>
							<text class="record-time">{{ record.time }}</text>
						</view>
						<view class="record-status" :class="record.status">
							<text class="status-text">{{ getStatusText(record.status) }}</text>
						</view>
					</view>
					<view class="record-stats">
						<text class="stat-text">出勤: {{ record.presentCount }}/{{ record.totalCount }}</text>
						<text class="stat-text">出勤率: {{ record.attendanceRate }}%</text>
					</view>
					<view class="record-actions">
						<text class="action-text">点击查看详情</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 创建考勤弹窗 -->
		<view v-if="showCreate" class="modal-overlay" @tap="closeCreateModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">创建考勤</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeCreateModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="input-group">
						<text class="input-label">考勤标题</text>
						<input 
							class="input-field" 
							v-model="newAttendance.title" 
							placeholder="请输入考勤标题"
						/>
					</view>
					<view class="input-group">
						<text class="input-label">考勤日期</text>
						<picker 
							mode="date" 
							:value="newAttendance.date" 
							@change="onDateChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ newAttendance.date || '请选择日期' }}</text>
								<uni-icons type="calendar" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="input-group">
						<text class="input-label">考勤时间</text>
						<picker 
							mode="time" 
							:value="newAttendance.time" 
							@change="onTimeChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ newAttendance.time || '请选择时间' }}</text>
								<uni-icons type="clock" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="input-group">
						<text class="input-label">考勤类型</text>
						<picker 
							mode="selector" 
							:range="attendanceTypes" 
							:value="newAttendance.typeIndex" 
							@change="onTypeChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ attendanceTypes[newAttendance.typeIndex] || '请选择类型' }}</text>
								<uni-icons type="down" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="input-group">
						<text class="input-label">备注说明</text>
						<textarea 
							class="textarea-field" 
							v-model="newAttendance.remark" 
							placeholder="请输入备注说明"
							:maxlength="200"
						></textarea>
						<text class="char-count">{{ newAttendance.remark.length }}/200</text>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @tap="closeCreateModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @tap="createAttendance">
						<text class="btn-text">创建</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue';

	// 考勤统计
	const attendanceStats = ref({
		totalStudents: 45,
		presentCount: 42,
		absentCount: 3,
		attendanceRate: 93.3
	});

	// 考勤记录列表
	const attendanceRecords = ref([
		{
			id: 1,
			title: '高等数学课程考勤',
			date: '2024-01-15',
			time: '08:00',
			status: 'completed',
			presentCount: 42,
			totalCount: 45,
			attendanceRate: 93.3,
			type: 'course',
			remark: '第一章微积分基础'
		},
		{
			id: 2,
			title: '班级会议考勤',
			date: '2024-01-14',
			time: '14:00',
			status: 'completed',
			presentCount: 40,
			totalCount: 45,
			attendanceRate: 88.9,
			type: 'meeting',
			remark: '期末复习安排会议'
		},
		{
			id: 3,
			title: '实验课考勤',
			date: '2024-01-13',
			time: '10:00',
			status: 'ongoing',
			presentCount: 38,
			totalCount: 45,
			attendanceRate: 84.4,
			type: 'lab',
			remark: '程序设计实验'
		}
	]);

	// 考勤类型
	const attendanceTypes = ref(['课程考勤', '会议考勤', '实验考勤', '活动考勤']);

	// 当前筛选
	const currentFilter = ref('all');

	// 创建考勤相关
	const showCreate = ref(false);
	const newAttendance = ref({
		title: '',
		date: '',
		time: '',
		typeIndex: 0,
		remark: ''
	});

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				// 如果返回失败，跳转到班级页面
				uni.navigateTo({
					url: '/pages/class/class'
				});
			}
		});
	};

	// 设置筛选
	const setFilter = (filter: string) => {
		currentFilter.value = filter;
	};

	// 筛选后的记录
	const filteredRecords = computed(() => {
		const today = new Date().toISOString().split('T')[0];
		const weekStart = new Date();
		weekStart.setDate(weekStart.getDate() - weekStart.getDay());
		const weekStartStr = weekStart.toISOString().split('T')[0];

		switch (currentFilter.value) {
			case 'today':
				return attendanceRecords.value.filter(record => record.date === today);
			case 'week':
				return attendanceRecords.value.filter(record => record.date >= weekStartStr);
			default:
				return attendanceRecords.value;
		}
	});

	// 显示创建考勤弹窗
	const showCreateModal = () => {
		showCreate.value = true;
	};

	// 关闭创建考勤弹窗
	const closeCreateModal = () => {
		showCreate.value = false;
		newAttendance.value = {
			title: '',
			date: '',
			time: '',
			typeIndex: 0,
			remark: ''
		};
	};

	// 日期选择
	const onDateChange = (e: any) => {
		newAttendance.value.date = e.detail.value;
	};

	// 时间选择
	const onTimeChange = (e: any) => {
		newAttendance.value.time = e.detail.value;
	};

	// 类型选择
	const onTypeChange = (e: any) => {
		newAttendance.value.typeIndex = e.detail.value;
	};

	// 创建考勤
	const createAttendance = () => {
		if (!newAttendance.value.title.trim()) {
			uni.showToast({
				title: '请输入考勤标题',
				icon: 'none'
			});
			return;
		}

		if (!newAttendance.value.date) {
			uni.showToast({
				title: '请选择考勤日期',
				icon: 'none'
			});
			return;
		}

		if (!newAttendance.value.time) {
			uni.showToast({
				title: '请选择考勤时间',
				icon: 'none'
			});
			return;
		}

		// BACKEND REQUIRED: POST /api/class/{classId}/attendance
		// Request Body: {
		//   title: string,
		//   date: string,
		//   time: string,
		//   type: string,
		//   remark: string
		// }
		// Response: { success: boolean, data: { id: number } }

		// 创建新考勤记录
		const record = {
			id: attendanceRecords.value.length + 1,
			title: newAttendance.value.title,
			date: newAttendance.value.date,
			time: newAttendance.value.time,
			status: 'pending',
			presentCount: 0,
			totalCount: 45,
			attendanceRate: 0,
			type: getTypeClass(newAttendance.value.typeIndex),
			remark: newAttendance.value.remark
		};

		// 添加到列表开头
		attendanceRecords.value.unshift(record);

		uni.showToast({
			title: '创建成功',
			icon: 'success'
		});

		closeCreateModal();
	};

	// 获取类型样式类
	const getTypeClass = (typeIndex: number) => {
		switch (typeIndex) {
			case 0:
				return 'course';
			case 1:
				return 'meeting';
			case 2:
				return 'lab';
			case 3:
				return 'activity';
			default:
				return 'course';
		}
	};

	// 获取状态文本
	const getStatusText = (status: string) => {
		switch (status) {
			case 'pending':
				return '待开始';
			case 'ongoing':
				return '进行中';
			case 'completed':
				return '已完成';
			default:
				return '未知';
		}
	};

	// 显示考勤详情
	const showRecordDetail = (record: any) => {
		uni.showModal({
			title: record.title,
			content: `日期：${record.date}\n时间：${record.time}\n出勤率：${record.attendanceRate}%\n备注：${record.remark}`,
			showCancel: false,
			confirmText: '确定'
		});
	};

	onMounted(() => {
		// BACKEND REQUIRED: GET /api/class/{classId}/attendance/stats
		// Response: {
		//   totalStudents: number,
		//   presentCount: number,
		//   absentCount: number,
		//   attendanceRate: number
		// }

		// BACKEND REQUIRED: GET /api/class/{classId}/attendance/records
		// Response: {
		//   records: Array<{
		//     id: number,
		//     title: string,
		//     date: string,
		//     time: string,
		//     status: string,
		//     presentCount: number,
		//     totalCount: number,
		//     attendanceRate: number,
		//     type: string,
		//     remark: string
		//   }>
		// }
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.attendance-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #FF3B30, #FF6B6B);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		padding: 10rpx;
	}

	/* 统计卡片 */
	.stats-cards {
		display: flex;
		padding: 20rpx;
		gap: 20rpx;
	}

	.stat-card {
		flex: 1;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.stat-number {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #FF3B30;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 考勤记录列表 */
	.attendance-list {
		padding: 0 20rpx;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.filter-tabs {
		display: flex;
		gap: 20rpx;
	}

	.filter-tab {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
		background: #fff;
	}

	.filter-tab.active {
		background: #FF3B30;
		color: #fff;
	}

	.records-list {
		max-height: 60vh;
	}

	.record-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.record-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.record-date {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.record-time {
		font-size: 24rpx;
		color: #666;
	}

	.record-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.record-status.pending {
		background: #fff3cd;
	}

	.record-status.ongoing {
		background: #d1ecf1;
	}

	.record-status.completed {
		background: #d4edda;
	}

	.status-text {
		font-size: 24rpx;
		color: #333;
	}

	.record-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.stat-text {
		font-size: 26rpx;
		color: #666;
	}

	.record-actions {
		text-align: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-text {
		font-size: 24rpx;
		color: #FF3B30;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.input-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
	}

	.textarea-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
		min-height: 120rpx;
		resize: none;
	}

	.char-count {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}

	.picker-field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.modal-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.cancel-btn {
		background: #f0f0f0;
	}

	.confirm-btn {
		background: #FF3B30;
	}

	.btn-text {
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn .btn-text {
		color: #fff;
	}
</style>


